<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script src="./js/jquery-2.1.0.js"></script>
<style>
    body {
        margin: 0;
        padding: 0;
        background: url("./img/bg3.png") no-repeat;
    }

    #app {
        text-align: center;
        border: 1px solid rgb(208, 197, 192);
        background-color: rgb(237, 229, 226);
        width: 500px;
        height: 420px;
        margin: 100px auto;
        padding-top: 15px;
        font-family: 幼圆;
        line-height: 10px;
        font-weight: bold;
    }

    a {
        color: rgb(80, 145, 61);
    }
</style>
<body>
<div id="app">
    <h3>图书借阅系统</h3>
    <img src="./img/user.jpg" style="border-radius: 50%;width: 80px;height: 80px">
    <p>当前登录用户: <span id="username"></span>
    </p>
    <br>
    <p><a href="addBook.html">*** 1.添加图书 ***</a></p>
    <p><a href="delBook2.html">*** 2.删除图书 ***</a></p>
    <p><a href="findBook.html">*** 3.搜索图书 ***</a></p>
    <p><a href="borrowBook.html">*** 4.借阅图书 ***</a></p>
    <p><a href="allInfo.html">*** 5.借阅记录 ***</a></p>
    <p><a href="BookReturn.html">*** 6.归还图书 ***</a></p>
    <p><a href="javascript:void(0);" id="tc">*** 7.退出登录 ***</a></p>
</div>
<script>
    <!-- 读取名字 -->
    var user = JSON.parse(sessionStorage.getItem("user"));
    $("#username").text(user.uname);
    console.log(user);
    //如果点击退出登录 直接在前端清空sessionStorage的内容，并且跳转登录页面
    $("#tc").click(()=>
    {
        //清空session
        sessionStorage.clear();
        $.ajax({
            type: "GET",
            url: "/api/user/exit",
            data: {
            },
            dataType: "JSON",
            success: function(data) {
            }
        });
        location.assign("index.html");
    })
</script>
</body>
</html>